<template>
  <div class="app-container">
    <header class="app-header">
      <el-row class="header-container">
        <div class="logo">
          <img src="./assets/logo.png" alt="Logo" />
          <span>涌泉科技有限公司</span>
        </div>
        <div class="user-info">
          <template v-if="isAuthenticated">
            <span>欢迎，{{ fullname }}</span>
            <el-button link type="primary" size="large" @click="handleLogout" style="padding-right: 30px;">退出</el-button>
          </template>
        </div>
      </el-row>
      <el-divider v-if="isAuthenticated"></el-divider>
      <el-row class="header-container">
        <nav class="nav-menu">
          <ul>
            <li v-for="item in appMenus" :key="item.path">
              <button class="menu-button" @click="navigateTo(item.name)">{{ item.desc }}</button>
            </li>
          </ul>
        </nav>
      </el-row>
      <el-divider></el-divider>
    </header>
    
    <!-- <Login/> -->
    <main class="app-content">
      <div id="subapp-viewport"></div>
      <router-view v-model="isAuthenticated"></router-view>
    </main>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { post } from "./utils/api";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
// import { store} from "./utils/store";
const router = useRouter();
const isChildLoaded = ref(false);
const isAuthenticated = ref(false); // 模拟用户登录状态
const fullname = ref("张三"); // 模拟用户名
const appMenus = ref([]);

// const appMenus = ref([
//   { name: "mc", desc: "管理中心" },
//   { name: "app", desc: "应用中心" },
//   { name: "monitor", desc: "监控预警" },
// ]);

watch(isAuthenticated, (newValue, oldValue) => {
  console.log(`isAuthenticated changed from ${oldValue} to ${newValue}`);
  if (newValue) {
    fullname.value = sessionStorage.getItem("fullname");
    appMenus.value = JSON.parse(sessionStorage.getItem("appMenus"));
  } else {
    fullname.value = "";
    appMenus.value = [];
  }
});
const navigateTo = (name) => {
  isChildLoaded.value = true;
  history.pushState(null, "", `/${name}/`);
  // router.push(`/${name}/`);
  // window.loadSubApp(name)
};
const handleLogout = async () => {
  isAuthenticated.value = false;
  await post("/logout")
    .then((res) => {
      if (res.data.code === 0) {
        isAuthenticated.value = false;
        sessionStorage.clear();
        ElMessage.success("已退出");
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
};

onMounted(() => {
  // 获取登陆状态
  if (sessionStorage.getItem("token")) {
    isAuthenticated.value = true;
  }
  if (isAuthenticated.value) {
    console.log("已登录");
    fullname.value = sessionStorage.getItem("fullname");
    appMenus.value = JSON.parse(sessionStorage.getItem("appMenus"));
  } else {
    console.log("未登录");
    // // 如果没有登陆，则跳转到登陆页面
    router.push("/login");
  }

  // 如果当前打开非子应用，则加载主页面
  if (window.location.pathname != "/") {
    isChildLoaded.value = true;
  }
});
</script>

<style scoped>
.app-content {
  /* flex: 1; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  background-color: white;
}
.app-header {
  background-color: white;
  /* color: black; */
  padding: 30 30px;
  width: 100%;
}
.app-container {
  display: flex;
  flex-direction: column;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-height: 40px;
}

.logo img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background-color: white;
}

.logo span {
  margin-left: 10px;
  font-size: 1.2em;
}

.nav-menu ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;

}
.menu-button {
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.user-info {
  display: flex;
  /* color: white; */
  align-items: center;
  gap: 10px;
}

.user-info button {
  /* background-color: #f44336; */
  /* color: white; */
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.el-divider {
  margin: 10px 0;
}
</style>
